<template>
  <el-container id="lap-app" v-loading="pBaseLoading">
    <el-main>
      <lap-table-bar>
        <template slot="title">日志类型</template>
        <template slot="menu">
          <el-button type="primary" @click="onCreate">新增</el-button>
        </template>
      </lap-table-bar>
      <el-table
        ref="table"
        :data="pTableData"
        row-key="codeGenaratorExampleId"
        :highlight-current-row="true"
      >
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column
          label="日志类型"
          width="300"
          property="LoggerName"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="()=>onDetail(scope.row)">{{scope.row.LoggerName}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="备注" property="Remarks" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="关闭/打开数据库记录" property="IsOpen" width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.IsOpen"
              :active-value="true"
              :inactive-value="false"
              @change="onChangeSwitch(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" class-name="operate" fixed="right" width="60">
          <template slot-scope="scope">
            <el-popconfirm title="确定删除当前记录？" @onConfirm="()=>onDelete(scope.row)">
              <el-link slot="reference">删除</el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!--编辑页面-->
      <el-dialog
        custom-class="lap-form-edit"
        title="日志类型"
        size="50%"
        v-if="pEditVisible"
        :visible.sync="pEditVisible"
        :close-on-click-modal="false"
        :destroy-on-close="true"
      >
        <LogTypeEdit :detailData="selectedRow" @after-submit="onAfterSubmit"></LogTypeEdit>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
/**
 * 此注释段用于标记页面可被自动注册到路由
 * auto-route
 */
import LogTypeEdit from "./LogTypeEdit.vue"; //编辑页面组件
export default {
  mixins: [$lap.BaseView],
  name: "lap-app",
  components: { LogTypeEdit }, //引用组件
  data() {
    return {
      pTitle: "代码生成例子", //页面标题
      pPageFunctionCode: "", //页面功能定义，例如：00100104
      selectedRow: null,
    };
  },
  methods: {
    /**
     * 平台加载方法
     */
    platLoadData() {
      const that = this;
      $lap
        .post("/MLogXWeb/LogHandler.ashx", {
          type: "GetAllLogger",
        })
        .then((data) => {
          that.pTableData = data;
        });
    },
    /**
     * 新增
     */
    onCreate() {
      const that = this;
      that.selectedRow = null;
      that.pEditVisible = true;
    },
    /**
     * 编辑
     */
    onDetail(row) {
      const that = this;
      that.selectedRow = row;
      that.pEditVisible = true;
    },
    /**
     * 删除
     */
    onDelete(row) {
      const that = this;
      $lap
        .delete("/MLogXWeb/LogHandler.ashx", {
          type: "DelLogger",
          name: Base64.encode(row.LoggerName),
        })
        .then((data) => {
          that.platLoadData();
        });
    },
    /**
     * 切换开关
     */
    onChangeSwitch(row) {
      $lap.post("/MLogXWeb/LogHandler.ashx", {
        type: "SetLoggerStatus",
        name: Base64.encode(row.LoggerName),
        isOpen: row.IsOpen,
      });
    },
    /**
     * 表单数据提交成功后
     */
    onAfterSubmit(dataId, opts = {}) {
      const that = this;
      that.platLoadData();
      if (opts.close === true) {
        that.pEditVisible = false;
      }
    },
  },
  watch: {},
};
</script>